<!-- 学社 - 动态 - 问题详情 -->
<template>
  <view>
    <!-- <z-paging-list ref="list" v-model="state.answerList" :safe-area-inset-bottom="false" @loadData="loadData"> -->
    <z-navbar title="问题详情" :border-bottom="true"></z-navbar>
    <view class="px-4 pt-5 pb-20">
      <!-- 顶部 -->
      <view class="flex items-center h-80">
        <u-image shape="circle" width="80" height="80" :src="state.detailData?.user?.avatar" @click="toHomePage(state.detailData?.user?.id)"></u-image>
        <view class="flex flex-col justify-between ml-3 h-76">
          <view class="flex items-center">
            <view class="c-#333 text-32" @click="toHomePage(state.detailData?.user?.id)">{{ state.detailData?.user?.nickname }}</view>
            <view v-if="state.detailData?.member_position > 0" class="tag-identity mx-2">{{
              formatIdentity(state.detailData?.member_position) }}</view>
            <image v-if="state.detailData?.user?.vip_level > 0" mode="aspectFit"
              :class="[state.detailData?.user?.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
              :src="`/static/images/user/ic_vip_tag_${formatVipIcon(state.detailData?.user?.vip_level)}.png`" />
          </view>
          <view class="c-#999 text-24">{{ state.detailData?.createtime }}</view>
        </view>
        <!-- 自己才可以删 -->
        <view v-if="state.detailData?.is_self" class="flex-1 flex justify-end">
          <u-image width="48" height="48" src="/static/images/home/ic_trend_delete.png"
            @click="onDelete(state.detailData?.id)"></u-image>
        </view>
      </view>
      <!-- 问题 -->
      <view class="question-card">
        <!-- 提问人 -->
        <view class="mt-6 text-sm c-#666">
          提问
          <text v-for="(item, index) in state.detailData?.at_info" :key="index" class="c-#F4AF22 mr-2" @click="toHomePage(item.id)">@{{ item.nickname
          }}</text>
        </view>
        <!-- 标题 -->
        <view class="mt-2 mb-5 c-#333 text-sm font-bold">{{ state.detailData?.content }}</view>
        <!-- 描述 -->
        <view class="c-#666 text-sm mb-3">{{ state.detailData?.remark }}</view>
        <u-image v-if="isSingleQuestionImg" border-radius="10" width="100%" height="352"
          :src="state.detailData?.slideshow[0]" @click="previewImage(state.detailData?.slideshow, 0)"></u-image>
        <view v-else class="grid grid-cols-3 gap-3">
          <u-image width="196" height="196" border-radius="16"
            v-for="(answerImg, answerIndex) in state.detailData?.slideshow" :key="answerIndex" :src="answerImg"
            @click="previewImage(state.detailData?.slideshow, index)" />
        </view>
        <view class="c-#999 text-28 mt-3">{{ state.detailData?.answer_num && state.detailData?.answer_num > 0 ?
          `${state.detailData?.answer_num}个回答` : '暂无回答'
        }}
        </view>
      </view>
      <!-- 回答列表 -->
      <view class="mt-8" v-for="(item, index) in state.answerList" :key="index">
        <!-- 顶部 -->
        <view class="flex items-center h-80">
          <u-image shape="circle" width="80" height="80" :src="item.avatar" @click="toHomePage(item.user_id)"></u-image>
          <view class="flex flex-col justify-between ml-3 h-76">
            <view class="flex items-center">
              <view class="c-#333 text-32" @click="toHomePage(item.user_id)">{{ item.nickname }}</view>
              <view v-if="item.member_position > 0" class="tag-identity mx-2">{{
                formatIdentity(item.member_position) }}</view>
              <image v-if="item.vip_level > 0" mode="aspectFit"
                :class="[item.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
                :src="`/static/images/user/ic_vip_tag_${formatVipIcon(item.vip_level)}.png`" />
            </view>
            <view class="c-#999 text-24">{{ item.createtime }}</view>
          </view>
        </view>
        <!-- 问题 -->
        <view class="question-card">
          <!-- 描述 -->
          <view class="c-#666 text-sm mb-3" @click="navigate(`/package_society/pages/trend/answer/detail?id=${item.id}`)">{{item.content}}</view>
          <u-image v-if="checkSingleAnswerImg(item.slideshow)" border-radius="10" width="100%" height="352"
            :src="item.slideshow[0]"  @click.stop="previewImage(item.slideshow, 0)"></u-image>
          <view v-else class="grid grid-cols-3 gap-3">
            <u-image width="196" height="196" border-radius="16"
              v-for="(answerImg, answerIndex) in item.slideshow" :key="answerIndex" :src="answerImg"
              @click.stop="previewImage(item.slideshow, index)" />
          </view>
          <!-- 评论/点赞 -->
          <view class="flex justify-end items-center c-#999 text-24 mt-3">
            <view class="flex items-center" @click="navigate(`/package_society/pages/trend/answer/detail?id=${item.id}`)">
              <u-image width="38" height="34" src="/static/images/home/ic_trend_comment.png"></u-image>
              <view class="ml-1">{{ item.comment_num }}</view>
            </view>
            <view class="flex items-center ml-3">
              <image class="w-42 h-36" @click.stop="onLikeSwitch(item.id, item.is_like)"
                :src="`/static/images/home/ic_trend_${item.is_like ? 'like' : 'nolike'}.jpg`"></image>
              <view class="ml-1">{{ item.like_num }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <template #bottom> -->
    <!-- 自己不能回答 -->
    <view v-if="!state.detailData?.is_self&&state.detailData?.need_answer==1" class="bottom-wrap-16 bg-white">
      <view class="btn-submit"
        @click="navigate(`/package_society/pages/trend/answer/add?question_id=${state.detailData?.id}&club_id=${state.detailData?.club_id}`)">
        回答</view>
    </view>
    <!-- </template> -->
    <!-- </z-paging-list> -->
  </view>
</template>

<script setup>
import { showModal, showToast, navigate, previewImage } from '@/common/util/uni'
import { refreshPrePage, formatIdentity, formatVipIcon, toHomePage } from '@/common/util/util'
import { getQuestionDetail, postAnswerGiveLike, postAnswerCancelLike, postQuestionDel, getQuestionAnswerLists } from '@/common/http/module/society.js'


// const list = ref();
const state = reactive({
  question_id: '', // 详情id
  detailData: null, // 动态详情数据
  answerList: [], // 回答列表
  isLike: true,
  questionImgNum: 1, // 问题图片数量
  answerImgNum: 2, // 回答图片数量
  answerNum: 2, // 回答数量
  questionerList: [1, 2, 3, 4, 5],  // 被提问人列表
  list: [],
  mode:''
})

const isSingleQuestionImg = computed(() => {
  return state.detailData?.slideshow.length == 1
})

function checkSingleAnswerImg (imgList) {
  return imgList && imgList.length == 1
}



// 回答点赞
function onLikeSwitch (answer_id, is_like) {
  const postMethods = is_like ? postAnswerCancelLike : postAnswerGiveLike
  postMethods({ answer_id }).then(() => {
    showToast(`${is_like ? '取消点赞' : '点赞'}成功`)
    loadData()
  })
}

// 删除
function onDelete (id) {
  showModal({
    confirmText: '删除',
    content: '是否删除该问题',
    success: function (res) {
      if (res.confirm) {
        // 删除接口
        postQuestionDel({ question_id: id }).then(() => {
          showToast('删除成功')
          refreshPrePage('refresh')
          setTimeout(() => uni.navigateBack(), 600)
        })
      }
    }
  });
}

// 获取提问详情
function loadDetail () {
  getQuestionDetail(state.question_id).then(res => {
    console.log('回答详情', res.data);
    state.detailData = res.data
  })
}

// 获取回答列表
function loadData () {
  getQuestionAnswerLists(state.question_id).then(res => {
    console.log('回答列表', res.data);
    state.answerList = res.data
    // state.commentNum = res.data?.total
    // list.value.onLoadResult(page ? res.data?.data : []);
  })
}

onLoad(options => {
  console.log(options,"kkk")
  state.question_id = options.id
  state.mode = options?.mode
  loadDetail()
  loadData();
});
</script>

<style lang="scss" scoped>
.question-card {
  padding: 20rpx 30rpx;
  border-radius: 6px;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.btn-submit {
  height: 68rpx;
  line-height: 68rpx;
  margin: 0 32rpx;
  border-radius: 12rpx;
  background-color: #F4AF22;
  font-size: 28rpx;
  color: #fff;
  text-align: center;
}
</style>
